<template>
	<view class="scrollPage">
			<u-navbar :border-bottom="false" title="生成海报" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
			<view>
				<hchPoster ref="hchPoster" :canvasFlag.sync="canvasFlag" @cancel="canvasCancel" :posterObj.sync="posterData"/>
				<view :hidden="canvasFlag"><!-- 海报 要放外面放组件里面 会找不到 canvas-->
					<canvas class="canvas"  canvas-id="myCanvas" ></canvas><!-- 海报 -->
				</view>
				
				<hch-poster
				  ref="hchPoster"
				  @cancel="handleCancel"
				  :posterData.sync="posterData"
				  @previewImage="previewImage"
				/>
			</view>
		</view>

</template>

<script>
var _self;
import {
	mapState,
	mapMutations
} from 'vuex';	
import HchPoster from '@/pageB/poster/hch-poster/hch-poster.vue'

export default{
	computed: {
		...mapState(['userInfo', 'hasLogin', 'scene', 'openid'])
	},
	components:{
		HchPoster,
	},
	data(){
		return{
			id: '',
			canvasFlag: true,
			sumimg:'',
			posterData: {
			  poster: {
			    //根据屏幕大小自动生成海报背景大小
			    url: '', //图片地址
			    r: 0, //圆角半径
			    w: 325, //海报宽度
			    h: 540, //海报高度
			    p: 0 //海报内边距padding
			  },
			  mainImg: {
			    //海报主商品图
			    url: '', //图片地址
			    r: 0, //圆角半径
			    w: 325, //宽度
			    h: 430 //高度
			  },
			  title: {
			    //商品标题
			    text: '', //文本
			    fontSize: 16, //字体大小
			    color: '#000', //颜色
			    lineHeight: 25, //行高
			    mt: 0 //margin-top
			  },
			  codeImg: {
			    //小程序码
			    url: '', //图片地址
			    w: 90, //宽度
			    h: 90, //高度
			    mt: 5, //margin-top
			    r: 0 //圆角半径
			  },
			  tips: [
			    //提示信息
			    {
			      text: '装修众销平台', //文本
			      fontSize: 14, //字体大小
			      color: '#ffffff', //字体颜色
			      align: 'center', //对齐方式
			      lineHeight: 25, //行高
			      mt: 40 //margin-top
			    },
			    {
			      text: '长按/扫描识别二维码', //文本
			      fontSize: 12, //字体大小
			      color: '#ffffff', //字体颜色
			      align: 'center', //对齐方式
			      lineHeight: 25, //行高
			      mt: 20 //margin-top
			    }
			  ]
			}
			
		}
	},
	onLoad(e){
		this.sumimg = e.imgurlobj;
		_self = this;
		if(e.id!=null && e.id!=''){
			_self.id = e.id;
		}
		_self.getPosterData();
	},
	methods:{
		...mapMutations(['login', 'logout', 'setOpenid', 'setScene']),
		
		getPosterData(){
			_self.posterData.poster.url = _self.serverUrl+ '/profile/upload/2021/11/29/a373f03952338d44acdd497937ecc73e.png';
			_self.posterData.mainImg.url = _self.serverUrl+ JSON.parse(this.sumimg);
			console.log(_self.posterData.mainImg.url)
			console.log(_self.posterData.poster.url)
			_self.posterData.title.text = '';
				_self.ewmShare();
		},
		ewmShare(){
			uni.showLoading({})
			uni.request({
				url: _self.serverUrl + 'app/getAsData',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				method: 'POST',
				data: {
				},
				success: (r) => {
					//console.log(r.data.data);
					if (r.data.code == 0) {
						uni.request({
							url: _self.serverUrl + 'app/sendUrl',
							header: {
								"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
							},
							data: {
								url:'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+r.data.data.appid+'&secret='+r.data.data.secret
							},
							method: 'POST',
							success(res) {
								if(res.data.code==0){
									var atoken = JSON.parse(res.data.data).access_token;
									//console.log(atoken);
									_self.getWxa(atoken);
								}
							},
							complete(res) {
								uni.hideLoading();
							}
						});
					}
				}
			})
		},
		getWxa(atoken){
			uni.showLoading({})
			var data = {
				"scene":_self.userInfo.id
			}
			uni.request({
				url: _self.serverUrl + 'app/sendUrl',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: {
					url:'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+atoken,
					params:JSON.stringify(data),
					method:'post',
					responseType:'arraybuffer'
				},
				method: 'POST',
				success(res) {
					if(res.data.code==0){
						//console.log(res);
						var wxaImg = _self.serverUrl+res.data.data;
						_self.posterData.codeImg.url = wxaImg;
						_self.handleShowPoster();
					}
				},
				complete(res) {
					uni.hideLoading();
				}
			});
		},
		
		handleShowPoster() {
			setTimeout(()=>{
				this.$refs.hchPoster.posterShow()
			},500)	
		},
		handleCancel(val) {
			// 取消
		  uni.navigateBack({
		  	delta: 1,
		  })
		},
		previewImage(base64) {
		  // 预览图片
		  uni.previewImage({
		    urls: [base64]
		  })
		},
		
	}
}
</script>

<style>
	
</style>
